<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>搜索</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/search.css" />
		<link rel="stylesheet" href="css/supermarket.css" />
		<link rel="stylesheet" href="css/all.css" />
	</head>
	<style type="text/css">
		.middle-one {
			width: 100%;
			position: absolute;
			top: 0.1rem;
			bottom: 0rem;
			z-index: -1;
			overflow-y: scroll;
		}
	</style>

	<body>
		<div>
			<div class="head">
				<span href="javascript:;" onclick="go()">
        <i class="iconfont icon-iconfontjiantou1"></i></span>
				<div class="sousuo">
					<i class="iconfont icon-sousuo"></i>
					<input type="text" placeholder="搜商品" class="resetUpwd-input" />
				</div>
				<span class="sousuo-one" onclick="ajaxLoad(1)">搜索</span>
			</div>
			<div class="middle-one">
				 
<!--				 
				<div onclick="location.href='./commodity-details.html'">
					<div class="commodity">
						<div class="commoditys">
							<img src="img/300377.png" alt="">
						</div>
						<div class="commo">
							<p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
							<p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
							<span>(</span><i class="money">1元</i><span>/100次)</span>
						</div>
					</div>
				</div>
				<div onclick="location.href='./commodity-details.html'">
					<div class="commodity">
						<div class="commoditys">
							<img src="img/300377.png" alt="">
						</div>
						<div class="commo">
							<p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
							<p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
							<span>(</span><i class="money">1元</i><span>/100次)</span>
						</div>
					</div>
				</div>-->
				
				
				
				
			</div>
		</div>
		<script src="js/jquery.js"></script>
		<script src="js/x_rem.js"></script>
		<script src="js/all.js"></script>
		<script type="text/javascript">
			//	$(".sousuo-one").click(()=>{
			//		var data={
			//			browseType:1,
			//			title:"炉石卡包"
			//		};
			//		
			//		var success=(data)=>{
			//			
			//		};
			//		
			//		Hajax("post","/browseTask/findPageBrowseTask2",data,success);
			//		
			//		
			//		
			//	})

			//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 2,
				_loadState = 0;

			//上拉加载调用js
			loadmore('.middle-one', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
						//console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
							ajaxLoad(_loadIndex);
						}
					}
				});

			};

			var html = "";

			function ajaxLoad(_loadIndex) {
				console.log(GetQueryString("id"));

				var data = {
					browseType: 1,
					title: "炉石卡包",
					page: _loadIndex,
					Rows: 6
				};

				var success = (data) => {

					for(let i = 0; i < data.length; i++) {
						html += `
							 
					        
					        <div onclick="location.href='./commodity-details.html'">
								<div class="commodity">
									<div class="commoditys">
										<img src="img/300377.png" alt="">
									</div>
									<div class="commo">
										<p class="commo-one">${data[i].browseRecord.browseTaskId.title}</p>
										<p class="commo-two">${data[i].browseRecord.browseTaskId.briefIntroduction} </p>
										<span>(</span>
										<i class="money">${data[i].browseRecord.browseTaskId.oneMoney}元</i>
										<span>/${data[i].browseRecord.browseTaskId.totalMoney}次)</span>
									</div>
								</div>
							</div>
						`
					}

					$(".middle-one").html(html);
					if(data == "") {

					} else {
						_loadState = 0; //状态改为0
					}

				}

				Hajax("post", "/browseTask/findPageMyBrowseRecord", data, success);
			};

			//			ajaxLoad(_loadIndex);
		</script>
	</body>

</html>